<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { MdPreview } from 'md-editor-v3'
import { useColorMode } from '@vueuse/core'
import 'md-editor-v3/lib/preview.css'
import { useInitWebsiteInfo } from '@/composables/useInitWebsiteInfo'

const mode = useColorMode({ storageKey: 'user-theme' })

const activeTab = ref<'project' | 'resume'>('project')
function activeTabClick(tab: any) {
  activeTab.value = tab
}
// 检测是否为移动端
const isMobile = ref(window.innerWidth <= 768)

const handleResize = () => {
  isMobile.value = window.innerWidth <= 768
  if (!isMobile.value) {
    activeTab.value = 'project' // 桌面端默认展示左侧
  }
}
const { webInfo, loading } = useInitWebsiteInfo()
onMounted(async () => {
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>
<template>
  <ContentSkeleton v-if="loading" />
  <div
    v-else
    class="h-[calc(100vh-96px)] overflow-hidden pt-4 pl-1 pr-1 flex flex-col md:flex-row gap-5"
  >
    <!-- 移动端 Tab 切换按钮 -->
    <div class="mb-4 md:hidden flex justify-center gap-4">
      <button
        :class="{
          'bg-blue-500 text-white': activeTab === 'project',
          'bg-gray-200 text-black': activeTab !== 'project'
        }"
        class="py-2 px-4 rounded-md"
        @click="activeTabClick('project')"
      >
        项目介绍
      </button>
      <button
        :class="{
          'bg-blue-500 text-white': activeTab === 'resume',
          'bg-gray-200 text-black': activeTab !== 'resume'
        }"
        class="py-2 px-4 rounded-md"
        @click="activeTabClick('resume')"
      >
        个人简历
      </button>
    </div>

    <!-- 项目介绍 -->
    <div
      class="w-full md:w-1/2 h-full bg-white dark:bg-neutral-800 rounded shadow text-sm flex flex-col"
      v-show="isMobile ? activeTab === 'project' : true"
    >
      <div
        class="text-center py-3 border-b border-gray-200 dark:border-neutral-600 font-bold text-lg""
      >
        项目介绍
      </div>
      <div class="flex-1 overflow-y-auto scrollbar">
        <MdPreview
          class="rounded-lg p-4 bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800"
          :modelValue="webInfo?.introduction"
          :theme="mode"
        />
      </div>
    </div>

    <!-- 个人简历 -->
    <div
      class="w-full md:w-1/2 h-full bg-white dark:bg-neutral-800 rounded shadow text-sm flex flex-col"
      v-show="isMobile ? activeTab === 'resume' : true"
    >
      <div
        class="text-center py-3 border-b border-gray-200 dark:border-neutral-600 font-bold text-lg"
      >
        个人简历
      </div>
      <div class="flex-1 overflow-y-auto scrollbar">
        <MdPreview
          class="rounded-lg p-4 bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800"
          :modelValue="webInfo?.introduction"
          :theme="mode"
        />
      </div>
    </div>
  </div>
</template>
<style scoped>
.scrollbar::-webkit-scrollbar {
  width: 5px;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #f90;
  border-radius: 10px;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

.scrollbar::-webkit-scrollbar-track {
  background-color: #eee;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}

.scrollbar::-webkit-scrollbar-button {
  display: none;
}

.scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #f90 #eee;
}

/* 夜间模式滚动条优化 */
html.dark .scrollbar::-webkit-scrollbar-thumb {
  background-color: #888; /* 稍微浅一点，更清晰 */
}

html.dark .scrollbar::-webkit-scrollbar-track {
  background-color: #1e1e1e; /* 和背景融为一体，干净统一 */
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.05); /* 增加一点层次 */
}

/* Firefox 支持 */
html.dark .scrollbar {
  scrollbar-color: #2788c4 #1e1e1e;
}

/* 移动端优化：隐藏滚动条，但可滚动 */
@media (max-width: 768px) {
  .scrollbar::-webkit-scrollbar {
    width: 0px; /* 隐藏滚动条 */
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background-color: transparent; /* 不显示滑块 */
  }

  .scrollbar::-webkit-scrollbar-track {
    background-color: transparent; /* 不显示轨道 */
  }

  .scrollbar {
    scrollbar-width: none; /* Firefox 支持隐藏滚动条 */
  }

  /* 在用户触摸时，显示滚动条 */
  .scrollbar:hover::-webkit-scrollbar {
    width: 5px; /* 滚动时显示 */
  }

  .scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: #f90; /* 滑块显示 */
  }
}
</style>
